
<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="www"></div>
  </div>
</template>
<script src="echarts.min.js"></script>
<script >
// import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  methods: {},
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let myChart = this.$echarts.init(document.getElementById('www'))
    var option
    option = {
      title: {
        text: '医废类别占比',
        //subtext: '无锡明慈医院',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '医废类别',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: '感染性废物' },
            { value: 735, name: '病理性废物' },
            { value: 580, name: '损伤性废物' },
            { value: 484, name: '药物性废物' },
            { value: 300, name: '化学性废物' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    }

    if (option && typeof option === 'object') {
      myChart.setOption(option)
    }
  },
}
</script>

<style scoped>
.el-breadcrumb {
  margin-left: 0.625rem;
  height: 3.125rem;
  font-size: 1.625rem;
  line-height: 3.125rem;
}
#www {
  display: inline-block;
  margin-right: 50px;
  width: 700px;
  height: 400px;
}
</style>
